import React from 'react';
import memo from '../common/wrapMemo';
import { useNavigate } from 'react-router';
import { message, Button, Form, Input } from 'antd';
import api from '../../api';
import style from './UpdatePassword.module.scss';
import { CloseOutlined } from '@ant-design/icons';

const UpdatePassword = memo((props) => {
    const { onClose } = props;
    const [form] = Form.useForm();
    const navigate = useNavigate();

    const onFinish = (values) => {
        // values.username = userInfo.get('userName');
        // delete values.confirm;
      
        api.user.updateUserPassword(values).then((res) => {
            const {code, data, msg} = res.data;
            if (code === 200) {
                message.success(data);
                onClose();
                navigate('/login');
            } else {
                message.error(msg);
            }
        });
    };

    return (
        <>
            <div className={style.updatePassword}>
                <div className={style.head}>
                    <span>更改密码</span>
                    <CloseOutlined onClick={onClose} />
                </div>
                <Form
                    className={style.form}
                    form={form}
                    layout="vertical"
                    onFinish={onFinish}
                    requiredMark={false}
                >
                    <Form.Item
                        name="oldP"
                        label="当前密码"
                        rules={[
                            {
                                required: true,
                                message: '请输入当前密码！',
                                whitespace: false,
                            },
                            // () => ({
                            //     validator(_, value) {
                            //         if (!value || userInfo.password === value) {
                            //             return Promise.resolve();
                            //         }
                            //         return Promise.reject(new Error('密码错误!'));
                            //     },
                            // }),
                        ]}
                    >
                        <Input.Password
                            className={style.input}
                            placeholder="请输入"
                            autoComplete="new-password"
                        />
                    </Form.Item>
                    <Form.Item
                        name="newP"
                        label="新密码"
                        rules={[
                            {
                                required: true,
                                message: '请输入新密码！',
                                whitespace: false,
                            },
                        ]}
                    >
                        <Input.Password
                            className={style.input}
                            placeholder="请输入"
                            autoComplete="new-password"
                        />
                    </Form.Item>
                    <Form.Item
                        name="repeatNew"
                        label="再次输入新密码"
                        dependencies={['newP']}
                        rules={[
                            {
                                required: true,
                                message: '请再次输入新密码！',
                                whitespace: false,
                            },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('newP') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('两次密码不一致!'));
                                },
                            }),
                        ]}
                    >
                        <Input.Password
                            className={style.input}
                            placeholder="请输入"
                            autoComplete="new-password"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button type="text" htmlType="submit" className={style.btn}>
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            <div className="mask"></div>
        </>
    );
});

export default UpdatePassword;
